<template>
  <div class="big">
    <!--  顶部-->
    <div class="head" style="display: flex;min-width: 100%">
      <span style="color: linen;font-size: 2.5em;margin-left: 50px;flex: 4;float: left">陈益禾私人健康诊所</span>
      <div style="height: 20px;float: right;border-left: 40px solid transparent;border-bottom: 40px solid #0099CC;line-height: 80px;flex: 1.2">
<!--        弹出框-->
        <el-popover
            placement="bottom"
            width="400"
            trigger="click">
          <el-table :data="doctors">
            <el-table-column width="100" prop="name" label="名字"></el-table-column>
            <el-table-column width="100" prop="Department" label="科室"></el-table-column>
            <el-table-column width="200" prop="timessss" label="值班时间"></el-table-column>
          </el-table>
          <el-button style="margin-left: 30px;background-image: linear-gradient(#003366, #336699);color: lightgray;border: none;flex: 1"  slot="reference" @click="doctor">值班时间表</el-button>
        </el-popover>
      <el-button
          style="margin-left: 30px;background-image: linear-gradient(#003366, #336699);color: lightgray;border: none;flex: 1"
          @click="centerDialogVisible = true">用户信息
      </el-button>
      <el-dialog
          title="用户信息"
          :visible.sync="centerDialogVisible"
          width="30%"
          center>
        <span style="margin-left: 180px;font-size: 2em;text-align: center">用户名:{{cgs.name}}</span>
        <br>
        <span style="margin-left: 175px;font-size: 2em;text-align: center">用户账号：{{cgs.account}}</span>
        <br>
        <span style="margin-left: 110px;font-size: 1em;text-align: center">TOKEN：{{cgs.token}}</span>
      </el-dialog>
      <el-button style="margin-left: 30px;background: black;color: lightgray;border: none;flex: 1" @click="exit">退出系统</el-button>
    </div>
    </div>
    <!--  头部导航-->
    <div id="home" style="height: 30px;background: #0099CC;border-radius:10px 0px 0px 10px;">
      <el-button
          style="text-decoration: none;margin-left:300px;color: black;width: 90px;height: 30px;background: none;border: none; font-size: 1em;color: white"
          @click="$router.push('/Index')">首页</el-button>
      <el-popover
          placement="bottom"
          title="如果有问题"
          width="200"
          trigger="click"
          content="请打咨询电话13367801839">
        <el-button
            style="text-decoration: none;color: black;margin-left: 30px;width: 90px;height: 30px;background: none;border: none; font-size: 1em;color: white"
            slot="reference">帮助
        </el-button>
      </el-popover>
    </div>
    <div style="height: 830px;margin: 10px;border-radius:10px;background: #336699;display: flex;flex-wrap: nowrap;">
      <!--    左侧导航-->
      <div
          style="height: 810px;border-radius:0px 0px 10px 10px;background: #545c64;flex: 1;max-width: 210px;min-width: 210px">
        <el-row class="tac">
          <el-col :span="12" style="width: 100%">
            <el-menu
                default-active="2"
                class="el-menu-vertical-demo"
                @open="handleOpen"
                @close="handleClose"
                background-color="#545c64"
                text-color="#fff"
                active-text-color="#ffd04b"
                style="border: none"
                :router="true"
            >
              <el-submenu index="/Index1">
                <template slot="title">
                  <span style="margin-left: 38px">客户信息管理</span>
                </template>
                <el-menu-item-group>
                  <el-menu-item index="/CustomerProfile" style="text-align: center">客户档案管理</el-menu-item>
                  <el-menu-item index="/CustomerTest" style="text-align: center">客户预约管理</el-menu-item>
                  <el-menu-item index="/TestInformation" style="text-align: center">体验信息管理</el-menu-item>
                </el-menu-item-group>
              </el-submenu>

              <el-submenu index="/Index2">
                <template slot="title">
                  <span style="margin-left: 38px">客户服务管理</span>
                </template>
                <el-menu-item-group>
                  <el-menu-item index="Consult" style="text-align: center">咨询管理</el-menu-item>
                  <el-menu-item index="ReturnVisit" style="text-align: center">回访管理</el-menu-item>
                  <el-menu-item index="CustomerCare" style="text-align: center">客户关怀</el-menu-item>
                </el-menu-item-group>
              </el-submenu>

              <el-submenu index="/Index3">
                <template slot="title">
                  <span style="margin-left: 44px">知识库管理</span>
                </template>
                <el-menu-item-group>
                  <el-menu-item index="KnowledgeVaseT" style="text-align: center">知识库类型管理</el-menu-item>
                  <el-menu-item index="KnowledgeContent" style="text-align: center">知识库内容管理</el-menu-item>
                </el-menu-item-group>
              </el-submenu>

              <el-submenu index="/Index4">
                <template slot="title">
                  <span style="margin-left: 50px">系统管理</span>
                </template>
                <el-menu-item-group>
                  <el-menu-item index="4-1" style="text-align: center" @click="exit">退出系统</el-menu-item>
                </el-menu-item-group>
              </el-submenu>
            </el-menu>
          </el-col>
        </el-row>
      </div>
      <div
          style="height: 807px;border-radius:5px 5px 10px 10px;
	margin-left: 37px;background: white;display: inline;flex: 8;">
        <router-view></router-view>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Index",
  data() {
    return {
      // 用户信息
      centerDialogVisible: false,
      token:localStorage.getItem("TOKEN"),
      cgs:{},
      doctors:{},
      // 帮助
      visible: false,
      // 对话框
      dialogFormVisible: false,
      formLabelWidth: '120px',
    }
  },
  created() {
    this.$axios.get('/api/user/mine/info', {headers:{ TOKEN:this.token}}).then((res) => {
      console.log('user', res);
      this.cgs=res.data.data;
      console.log(this.token);
    })
  },
  methods: {
    // 左侧导航
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
    exit() {
      localStorage.removeItem('TOKEN');
      this.$router.push('/Login');
      this.$message.success('退出成功')
    },
    doctor(){
      // 运用axios的get方式通过url获取后端数组
      this.$axios.get("/api/doctor/list").then((res) =>{
        console.log(res);
        // 数组等于res里的数据
        this.doctors = res.data.data;
      })
    },
    keyDown(e){
      //如果是F5则执行回到首页
      if(e.keyCode == 116){
        this.$router.push('/Index')
      }
    }
  },
  mounted(){
    //绑定事件
    window.addEventListener('keydown',this.keyDown);
  },
}
</script>

<style scoped>
.big {
  height: 100%;
  width: 100%;
  background: black;
}

/*顶部样式*/
.head {
  height: 60px;
  width: 100%;
  background-image: linear-gradient(#003366, #336699);
}
</style>